<template>
  <!--1. vue3 的template 内部 不要一个根元素div了 -->
   <div>
      vue3 的template 根元素可以有多个了
      内部不需要根元素div 包裹
   </div>
   <h1>vue2的写法</h1>
   <!-- vue3 渲染语法不变 -->
   <h1>数据：{{count}}</h1>
   <h1>计算属性：{{doubleCount}}</h1>
   <button @click="toAdd">加1</button>
   <hr>
   <appChild></appChild>
   
</template>

<script >
// vue3 的项目 支持90%的vue2的语法
import appChild from './appChild.vue'
  export default {
     components:{appChild},
     name:"App",
     data(){
      return {
        count:1,//计算器渲染
        name:"王天豪",
        addForm:{
          name:"",
          age:"",
          sex:""
        }
      }
     },
     methods:{
      toAdd(){
        this.count++
      }
     },
     computed:{
      doubleCount(){ //计算属性
        return this.count*2
      }
     }
  }

</script>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
